<template>
  <div class="cart-page">
    <!-- 顶部导航栏 -->
    <Header />
    
    <div class="main-content">
      <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
          <h1>{{ $t('cart.title') }}</h1>
          <p>{{ $t('cart.manageCart') || '管理您的购物清单' }}</p>
        </div>
        
        <!-- 购物车内容 -->
        <div class="cart-content">
          <!-- 购物车为空 -->
          <div v-if="isCartEmpty" class="empty-cart">
            <ShoppingCartOutlined class="empty-icon" />
            <h3>{{ $t('cart.empty') }}</h3>
            <p>{{ $t('cart.emptyDesc') || '快去挑选心仪的商品吧' }}</p>
            <a-button type="primary" size="large" @click="goToProducts">
              {{ $t('cart.goShopping') || '去购物' }}
            </a-button>
          </div>
          
          <!-- 购物车有商品 -->
          <div v-else class="cart-items">
            <!-- 商品列表 -->
            <div class="cart-list">
              <div 
                v-for="item in cartItems" 
                :key="item.id"
                class="cart-item"
              >
                <!-- 商品图片 -->
                <div class="item-image">
                  <img :src="item.image" :alt="item.name" />
                </div>
                
                <!-- 商品信息 -->
                <div class="item-info">
                  <h3 class="item-name">{{ item.name }}</h3>
                  <p class="item-description">{{ item.description }}</p>
                  <div class="item-price">¥{{ item.price }}</div>
                </div>
                
                <!-- 数量控制 -->
                <div class="item-quantity">
                  <a-button 
                    size="small" 
                    @click="decreaseQuantity(item.id)"
                    :disabled="item.quantity <= 1"
                  >
                    <MinusOutlined />
                  </a-button>
                  <span class="quantity">{{ item.quantity }}</span>
                  <a-button 
                    size="small" 
                    @click="increaseQuantity(item.id)"
                    :disabled="item.quantity >= item.stock"
                  >
                    <PlusOutlined />
                  </a-button>
                </div>
                
                <!-- 小计 -->
                <div class="item-subtotal">
                  ¥{{ (item.price * item.quantity).toFixed(2) }}
                </div>
                
                <!-- 删除按钮 -->
                <div class="item-actions">
                  <a-button 
                    type="text" 
                    size="small" 
                    @click="removeFromCart(item.id)"
                    danger
                  >
                    <DeleteOutlined />
                    {{ $t('common.delete') }}
                  </a-button>
                </div>
              </div>
            </div>
            
            <!-- 购物车摘要 -->
            <div class="cart-summary">
              <h3>{{ $t('cart.summary') || '购物车摘要' }}</h3>
              
              <div class="summary-item">
                <span>{{ $t('cart.totalItems') || '商品总数：' }}</span>
                <span>{{ cartItemCount }}{{ $t('cart.items') }}</span>
              </div>
              
              <div class="summary-item">
                <span>{{ $t('cart.subtotal') }}：</span>
                <span class="total-price">¥{{ cartTotal.toFixed(2) }}</span>
              </div>
              
              <div class="summary-item">
                <span>运费：</span>
                <span>{{ shippingFee > 0 ? `¥${shippingFee.toFixed(2)}` : '免运费' }}</span>
              </div>
              
              <a-divider />
              
              <div class="summary-item total">
                <span>总计：</span>
                <span class="final-price">¥{{ (cartTotal + shippingFee).toFixed(2) }}</span>
              </div>
              
              <!-- 操作按钮 -->
              <div class="cart-actions">
                <a-button @click="clearCart" size="large">
                  清空购物车
                </a-button>
                <a-button 
                  type="primary" 
                  size="large" 
                  @click="goToCheckout"
                >
                  去结算
                </a-button>
              </div>
              
              <!-- 继续购物 -->
              <div class="continue-shopping">
                <a-button type="link" @click="goToProducts">
                  <ArrowLeftOutlined />
                  继续购物
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部信息 -->
    <Footer />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue'
import {
  ShoppingCartOutlined,
  MinusOutlined,
  PlusOutlined,
  DeleteOutlined,
  ArrowLeftOutlined
} from '@ant-design/icons-vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

// 使用Vuex store和Vue Router
const store = useStore()
const router = useRouter()

// 计算属性
const cartItems = computed(() => store.getters['cart/cartItems'])
const cartItemCount = computed(() => store.getters['cart/cartItemCount'])
const cartTotal = computed(() => store.getters['cart/cartTotal'])
const isCartEmpty = computed(() => store.getters['cart/isCartEmpty'])

// 运费计算（可以根据实际需求调整）
const shippingFee = computed(() => {
  return cartTotal.value >= 99 ? 0 : 10
})

// 方法
const increaseQuantity = (productId) => {
  const item = cartItems.value.find(item => item.id === productId)
  if (item && item.quantity < item.stock) {
    store.dispatch('cart/updateQuantity', {
      productId,
      quantity: item.quantity + 1
    })
  }
}

const decreaseQuantity = (productId) => {
  const item = cartItems.value.find(item => item.id === productId)
  if (item && item.quantity > 1) {
    store.dispatch('cart/updateQuantity', {
      productId,
      quantity: item.quantity - 1
    })
  }
}

const removeFromCart = (productId) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要从购物车中删除这个商品吗？',
    onOk: () => {
      store.dispatch('cart/removeFromCart', productId)
      message.success('已从购物车中删除')
    }
  })
}

const clearCart = () => {
  Modal.confirm({
    title: '确认清空',
    content: '确定要清空购物车吗？',
    onOk: () => {
      store.dispatch('cart/clearCart')
      message.success('购物车已清空')
    }
  })
}

const goToProducts = () => {
  router.push('/products')
}

const goToCheckout = () => {
  router.push('/checkout')
}
</script>

<style scoped>
.cart-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  flex: 1;
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.cart-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.cart-list {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
  flex-shrink: 0;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  min-width: 0;
  margin-right: 20px;
}

.item-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-description {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff4d4f;
}

.item-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 20px;
}

.quantity {
  min-width: 40px;
  text-align: center;
  font-size: 16px;
  color: #333;
}

.item-subtotal {
  font-size: 18px;
  font-weight: bold;
  color: #ff4d4f;
  margin-right: 20px;
  min-width: 80px;
  text-align: right;
}

.item-actions {
  flex-shrink: 0;
}

.cart-summary {
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  position: sticky;
  top: 20px;
}

.cart-summary h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.summary-item.total {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.total-price,
.final-price {
  color: #ff4d4f;
  font-weight: bold;
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.cart-actions .ant-btn {
  height: 40px;
}

.continue-shopping {
  text-align: center;
  margin-top: 15px;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.empty-icon {
  font-size: 64px;
  color: #d9d9d9;
  margin-bottom: 20px;
}

.empty-cart h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px 0;
}

.empty-cart p {
  color: #666;
  margin: 0 0 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 15px 0;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .cart-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .cart-summary {
    width: 100%;
    position: static;
  }
  
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .item-image {
    width: 60px;
    height: 60px;
    margin-right: 0;
  }
  
  .item-info {
    margin-right: 0;
    width: 100%;
  }
  
  .item-quantity {
    margin-right: 0;
  }
  
  .item-subtotal {
    margin-right: 0;
    text-align: left;
  }
  
  .item-actions {
    align-self: flex-end;
  }
}
</style> 